import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';
import MobX from 'mobx';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'AccountsDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        let title = this.store.isUpdate ? '修改管理员' : '添加管理员';
        title = this.store.modifyPassword ? '修改管理员密码' : title;
        return (
            <div className={this.store.visible ? 'accounts-mask fade-in' : 'accounts-mask fade-out'}
                 onClick={() => this.store.closeDialog()}>
                <div className="accounts-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="accounts-header">
                        <span className="header-title">{title}</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div className="accounts-content">
                        {
                            !this.store.modifyPassword &&
                            <div className="accounts-input-wrapper">
                                <span className="accounts-input-text">身份</span>
                                <ReSelectField
                                    type=""
                                    className="work-input"
                                    isOpen={false}
                                    list={MobX.toJS(this.store.rolesList)}
                                    value={this.store.accountIdentity}
                                    placeholder={'管理员身份'}
                                    onChange={(v) => this.store.identityChange(v.value)}/>
                            </div>
                        }
                        {
                            !this.store.modifyPassword &&
                            <div className="accounts-input-wrapper">
                                <span className="accounts-input-text">账号</span>
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.nameChange(v)}
                                    errorText={''}
                                    value={this.store.accountName}
                                    placeholder={'管理员账号（可做登录）'}/>
                            </div>
                        }
                        {
                            !this.store.modifyPassword &&
                            <div className="accounts-input-wrapper">
                                <span className="accounts-input-text">手机号</span>
                                <ReTextField
                                    isLabel={false}
                                    type="number"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.phoneChange(v)}
                                    errorText={''}
                                    supportIntOnly={true}
                                    value={this.store.accountPhone}
                                    placeholder={'管理员手机号（可做登录）'}/>
                            </div>
                        }

                        {
                            (!this.store.isUpdate || this.store.modifyPassword) &&
                            <div className="accounts-input-wrapper">
                                <span className="accounts-input-text">密码</span>
                                <ReTextField
                                    isLabel={false}
                                    type="password"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.passwordChange(v)}
                                    errorText={''}
                                    maxLength="15"
                                    value={this.store.accountPassword}
                                    placeholder={'管理员密码'}/>
                            </div>
                        }

                        <div className="button-wrapper">
                            <ReButton label={'确定'} className="button-confirm"
                                      onClick={() => this.store.confirmDialog()}/>
                        </div>

                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-accountsdialog-root">
                {this.renderDialog()}
            </div>
        );
    }
}